<template>
    <Modal :mask-closable="false" v-model="visible" :title="title">
        <Form ref="form" v-if="visible" class="formList" :model="form" label-position="top" :rules="rules">

            <FormItem label="工艺路线名称" required prop="processName">
                <Input type="text" v-model="form.processName" placeholder="请输入工艺路线名称" class="inputBorder"></Input>
            </FormItem>
           
            <FormItem label="产品名称" required prop="productId">
                <Select v-model="form.productId" placeholder="请选中产品名称`">
                    <Option v-for="(item, index) in materialList" :key="index.id" :value="item.id"
                        :label="item.productName"></Option>
                </Select>

            </FormItem>
            <FormItem label="是否发布"  prop="processPublished">
                <Select v-model="form.processPublished" clearable  >
                <Option v-for="(item) of dicData" :value="item.value" :key="item.value"
                :label="item.label"
                ></Option>
                </Select>
            </FormItem>

        </Form>
        <div slot="footer" v-if="visible">
            <Button type="default" @click="closeModal">取消</Button>
            <Button type="primary" @click="handleSubmit('form')">确定</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: "CreateOrUpdateModal",
    props: {
        visible: Boolean,
        form: Object,
        title: String,
        handleAddSubmit: Function,
        materialList: Array,
        dicData: Array,
    },
    data() {
        return {
            rules: {
                processName: [
                    { required: true, message: '请输入工艺路线名称', trigger: 'blur' }
                ],
                productId: [
                    { required: true, message: '请输入产品名称', trigger: 'blur' }
                ],
                // processPublished: [
                //     { required: true, message: '请选择是否发布', trigger: 'blur' }
                // ],
            },
        };
    },
    methods: {
        closeModal() {
            this.$emit("update:visible", false);
        },
        handleSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.handleAddSubmit(formName);
                }
            })

        },
    },
};
</script>

<style scoped>
.formList {}
</style>